<template>
  <div id="box">
    <el-container>
      <el-header>顶部</el-header>
      <el-main>
        <div class="erweimaBox">
          <p v-show="aa">订单将在{{ count }}后失效，请及时付款</p>
          <p v-show="!aa">二维码已失效!点击刷新重新获取</p>
          <!-- <img v-show="aa" src="./erweima.png" class="erweima" alt="" /> -->
          <!-- <img
            v-show="!aa"
            src="./shixiao.png"
            @click="shuaxin"
            class="erweima"
            alt=""
          /> -->
          <p>请使用微信扫一扫完成支付</p>
        </div>
        <div class="dingdan">
          <h4>大麦网订单</h4>
          <p><span class="mingcheng">支付订单号:</span>430000201004178510</p>
          <p><span class="mingcheng">商品名称:</span>始亲观性指构音运世团</p>
          <p><span class="mingcheng">订单金额:</span>￥ 84.71</p>
        </div>
      </el-main>
      <el-footer>底部</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "payment",
  data() {
    return {
      aa: true,
      shuaxin: "",
      count: "", //倒计时
      seconds: 10, // 10秒倒计时数
    };
  },
  mounted() {
    this.Time(); //调用定时器
  },
  methods: {
    // 天 时 分 秒 格式化函数
    countDown() {
      let d = parseInt(this.seconds / (24 * 60 * 60));
      d = d < 10 ? "0" + d : d;
      let h = parseInt((this.seconds / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((this.seconds / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s;
      this.count = d + "天" + h + "时" + m + "分" + s + "秒";
    },
    //定时器没过1秒参数减1
    Time() {
      setInterval(() => {
        if (this.seconds >= 1) {
          this.seconds -= 1;
        }
        if (this.seconds == 0) {
          this.seconds = -1;
          this.aa = false;
          //   return alert("二维码已失效");
        }
        this.countDown();
      }, 1000);
    },
    shuxin() {
      this.$router.replace({ path: "/payment" });
    },
  },
  components: {},
};
</script>

<style scoped>
#box {
  text-align: center;
}
.el-main {
  width: 1200px;
  height: 400px;
  border: 1px red solid;
  margin: 0 auto;
  display: inline-block;
}
.erweimaBox {
  width: 300px;
  height: 300px;
  /* border: 1px red solid; */
  display: inline-block;
}
.erweima {
  width: 200px;
}
.dingdan {
  width: 300px;
  height: 200px;
  /* border: 1px red solid; */
  display: inline-block;
  position: relative;
  top: -120px;
  margin-left: 50px;
}
.dingdan .mingcheng {
  font-weight: bold;
  float: left;
}
</style>

